/*
 * @Descripttion: 
 * @Author: zhangchong zc16607@gmail.com
 * @Date: 2023-03-13 10:50:39
 * @LastEditors: zhangchong zc16607@gmail.com
 * @LastEditTime: 2023-04-14 14:41:14
 */
import { HStack, Stack, Avatar, Button, Container, useColorMode, View, Text, Icon, Row, Pressable, useColorModeValue } from "native-base";
import Ionicons from 'react-native-vector-icons/Ionicons'
import { useContext, useEffect, useState } from "react";
import Storage from '../../utils/asyncStorage'
import { TokenContext } from "../Context";
import appColor from "../../utils/appColor";

function MeScreen({ navigation }) {

  const [user, setUser] = useState('')
  useEffect(() => {
    Storage.getItem('user').then(res => {
      setUser(res.name)
    })
  }, [])

  const { updateToken } = useContext(TokenContext)

  const logout = () => {
    Storage.setItems([['user', ''], ['username', '']]).then(() => {
      updateToken('')
    })
  }

  // 点击项
  const itemClick = (type) => {
    switch (type) {
      case 'nt':
        navigation.navigate('ntconfig')
        break
      default:
        break
    }
  }

  const { colorMode } = useColorMode()
  const itemBorderColor = useColorModeValue(appColor.light3, appColor.dark3)

  return (
    <Container w={'100%'} h={'100%'} maxW={'100%'} bgColor={colorMode === 'dark' ? appColor.darkbg : appColor.lightbg}>

      <HStack justifyContent="center" mt={'20'} mx={{
        base: "auto",
        md: "0"
      }} space={2}>
        <Avatar bg="green.500" mr="1" size={'xl'} source={{ uri: "http://pic.imeitou.com/uploads/allimg/230316/7-230316102558.jpg" }}>
          {user}
        </Avatar>
      </HStack>

      {/* 宽度为100，内边距左右5，上下外边距20 */}
      <Stack w={{ base: '100%' }} px={8} marginY={20} direction='column' space={3} justifyContent="center">
        <Pressable onPress={() => itemClick('nt')}>
          <Row borderBottomWidth={1} borderBottomColor={itemBorderColor} h={10} justifyContent={'space-between'} alignItems={'center'}>
            <Text>NasTool配置</Text>
            <Icon as={<Ionicons name="chevron-forward-outline" />} size={22} />
          </Row>
        </Pressable>

      </Stack>


      <HStack mx={{ base: 'auto', md: '0' }} w={{ base: '100%' }} position={'absolute'} bottom={20} justifyContent={'center'}>
        <Button bg={colorMode === 'dark' ? 'coolGray.700' : 'coolGray.400'} shadow={'4'} size={'sm'} onPress={logout}>注销登录</Button>
      </HStack>


    </Container>



    // <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    //   <Text>Me screen</Text>
    //   <Button
    //     title="去登录"
    //     onPress={() => navigation.navigate('login')}
    //   />
    // </View>
  );
}


export default MeScreen